<template>
  <div class="list-table">
    <div class="nospecialModel ">
      <div class="area-header">
        <span class="area-header-title">{{ $t('Dashboard报表') }}</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('截止日期')" prop="endDate">
          <el-date-picker
            v-model="queryParams.endDate"
            type="month"
            placeholder="截止日期"
          />
        </el-form-item>
        <el-form-item :label="$t('基金名称')">
          <el-select v-model="arrayParams.investorIds" filterable multiple :placeholder="$t('基金名称')" clearable @change="changeData()">
            <el-option
              v-for="fund in fundOptions"
              :key="fund.id"
              :label="$t(fund.fundName)"
              :value="fund.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('项目行业')" prop="dealIndustrys">
          <el-select v-model="arrayParams.dealIndustrys" filterable multiple :placeholder="$t('项目行业')" clearable @change="changeData()">
            <el-option
              v-for="dict in dealIndustryOptions"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('项目名称')" prop="dealIds">
          <el-select v-model="arrayParams.dealIds" filterable multiple :placeholder="$t('项目名称')" clearable>
            <el-option
              v-for="deal in dealOptions"
              :key="deal.id"
              :label="$t(deal.dealName)"
              :value="deal.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
          <el-button icon="el-icon-download" size="mini" @click="exportHandle">{{ $t("导出") }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="loading" tooltip-effect="darkTable" :data="dashboardList" border>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('Project Name')" align="center">
        <el-table-column :label="$t('项目名称')" align="center" prop="dashboardVO.dealName" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType: scope.row.dashboardVO.dealType, companyId:scope.row.dashboardVO.companyId, showType: 'deal'}}"
              class="link_a"
            >
              {{ $t(scope.row.dealName) }}
            </router-link>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Company')" align="center">
        <el-table-column :label="$t('公司名称')" align="center" prop="dashboardVO.companyName" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.dashboardVO.companyId}}"
              class="link_a"
            >
              {{ $t(scope.row.dashboardVO.companyName) }}
            </router-link>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Area')" align="center">
        <el-table-column :label="$t('国家')" align="center" prop="dashboardVO.area" show-overflow-tooltip min-width="120" />
      </el-table-column>
      <el-table-column :label="$t('Fund')" align="center">
        <el-table-column :label="$t('基金')" align="center" prop="dashboardVO.fund" show-overflow-tooltip min-width="180" />
      </el-table-column>
      <el-table-column :label="$t('Currency')" align="center">
        <el-table-column :label="$t('货币')" prop="dashboardVO.currency" align="center" show-overflow-tooltip min-width="100" :formatter="currencyFormat" />
      </el-table-column>
      <el-table-column :label="$t('Investment Date')" align="center">
        <el-table-column :label="$t('投资日期')" align="center" prop="dashboardVO.investmentDate" min-width="140">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dashboardVO.investmentDate) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Listed')" align="center">
        <el-table-column :label="$t('是否上市')" prop="dashboardVO.listed" align="center" show-overflow-tooltip min-width="100" :formatter="listedFormat" />
      </el-table-column>
      <el-table-column :label="$t('Investment Amount')" align="center">
        <el-table-column :label="$t('投资金额') + $t('金额单位')" prop="dashboardVO.investmentAmount" align="center" show-overflow-tooltip min-width="160">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.investmentAmount, 'w') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Ownership at Investment')" align="center">
        <el-table-column :label="$t('投资时股权比例(%)')" prop="dashboardVO.ownershipInvestment" align="center" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.ownershipInvestment, 'rate') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Ownership at Exit/Current')" align="center">
        <el-table-column :label="$t('退出时/现在股权比例(%)')" prop="dashboardVO.ownershipExit" align="center" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.ownershipExit, 'rate') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('退出收益') + $t('金额单位')" prop="dashboardVO.incomeExit" align="center" show-overflow-tooltip min-width="110">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.dashboardVO.incomeExit, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Realized Proceeds')" align="center">
        <el-table-column :label="$t('已兑现收益') + $t('金额单位')" prop="dashboardVO.realizedProceeds" align="center" show-overflow-tooltip min-width="160">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.realizedProceeds, 'w') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Unrealized Value')" align="center">
        <el-table-column :label="$t('未兑现收益') + $t('金额单位')" prop="dashboardVO.unrealizedValue" align="center" show-overflow-tooltip min-width="160">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.unrealizedValue, 'w') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Total Value')" align="center">
        <el-table-column :label="$t('总收益') + $t('金额单位')" prop="dashboardVO.totalValue" align="center" show-overflow-tooltip min-width="110">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.totalValue, 'w') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Gross IRR')" align="center">
        <el-table-column :label="$t('内部收益率(%)')" prop="dashboardVO.grossIRR" align="center" show-overflow-tooltip min-width="110">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.grossIRR, 'rate') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Gross TVM')" align="center">
        <el-table-column :label="$t('回报倍数')" prop="dashboardVO.grossTVM" align="center" show-overflow-tooltip min-width="110">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.dashboardVO.grossTVM, 'rate') }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Company Description')" align="center">
        <el-table-column :label="$t('公司介绍')" align="center" prop="dashboardVO.companyDescription" show-overflow-tooltip min-width="160" />
      </el-table-column>
      <el-table-column :label="$t('简介')" align="center" prop="dashboardVO.dealDescription" show-overflow-tooltip min-width="150" />
      <el-table-column :label="$t('Sector1')" align="center">
        <el-table-column :label="$t('行业')" align="center" prop="dashboardVO.sector1" show-overflow-tooltip min-width="120" :formatter="dealIndustryFormat" />
      </el-table-column>
      <el-table-column :label="$t('Sector2')" align="center">
        <el-table-column :label="$t('行业')" align="center" prop="dashboardVO.sector2" show-overflow-tooltip min-width="120" />
      </el-table-column>
      <el-table-column :label="$t('Type of Investment (Growth Equity, Buyout)')" align="center">
        <el-table-column :label="$t('投资类型')" align="center" prop="dashboardVO.typeOfInvestment" show-overflow-tooltip min-width="160" :formatter="investmentTypeFormat" />
      </el-table-column>
      <el-table-column :label="$t('Lead/Co-Investor')" align="center">
        <el-table-column :label="$t('主/跟投')" align="center" prop="dashboardVO.leadCoInvestor" show-overflow-tooltip min-width="150" />
      </el-table-column>
      <el-table-column :label="$t('Deal Source')" align="center">
        <el-table-column :label="$t('项目来源')" align="center" prop="dashboardVO.dealSource" show-overflow-tooltip min-width="120" />
      </el-table-column>
      <el-table-column :label="$t('投资税务架构')" align="center" prop="dashboardVO.investmentFramework" show-overflow-tooltip min-width="140" />
      <el-table-column :label="$t('Rep at portfolio Now')" align="center">
        <el-table-column :label="$t('现时管理层代表')" align="center" prop="dashboardVO.repPortfolioNow" show-overflow-tooltip min-width="160" />
      </el-table-column>
      <el-table-column :label="$t('Rep at portfolio')" align="center">
        <el-table-column :label="$t('投资时管理层代表')" align="center" prop="dashboardVO.repPortfolio" show-overflow-tooltip min-width="140" />
      </el-table-column>
      <el-table-column :label="$t('Board Seat Holders')" align="center">
        <el-table-column :label="$t('董事会成员（投资时）')" align="center" prop="dashboardVO.boardSeatHolders" show-overflow-tooltip min-width="160" />
      </el-table-column>
      <el-table-column :label="$t('Other Investor')" align="center">
        <el-table-column :label="$t('其他投资人')" align="center" prop="dashboardVO.otherInvestor" show-overflow-tooltip min-width="140" />
      </el-table-column>
      <el-table-column :label="$t('Headquarter')" align="center">
        <el-table-column :label="$t('城市')" align="center" prop="dashboardVO.headquarter" show-overflow-tooltip min-width="110" />
      </el-table-column>
      <el-table-column :label="$t('最近一次退出时间')" align="center" prop="dashboardVO.exitTimeMax" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dashboardVO.exitTimeMax) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('最近一次退出性质/方式')" align="center" prop="dashboardVO.exitWayMax" show-overflow-tooltip min-width="160" />
      <el-table-column :label="$t('退出情况')" align="center" prop="dashboardVO.exitSituation" show-overflow-tooltip min-width="130" />
      <el-table-column :label="$t('进入时估值依据')" align="center" prop="dashboardVO.valuationMethodFirst" show-overflow-tooltip min-width="130" />
      <el-table-column :label="$t('进入时基数')" align="center" prop="dashboardVO.valuationBaseFirst" show-overflow-tooltip min-width="110">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.dashboardVO.valuationBaseFirst, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('进入时倍数')" align="center" prop="dashboardVO.valuationMultipleFirst" show-overflow-tooltip min-width="110" />
      <el-table-column :label="$t('报告日估值依据')" align="center" prop="dashboardVO.valuationMethodMax" show-overflow-tooltip min-width="130" />
      <el-table-column :label="$t('报告日基数')" align="center" prop="dashboardVO.valuationBaseMax" show-overflow-tooltip min-width="110">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.dashboardVO.valuationBaseMax, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('报告日倍数')" align="center" prop="dashboardVO.valuationMultipleMax" show-overflow-tooltip min-width="110" />
      <el-table-column :label="$t('估值相关货币')" prop="dashboardVO.valuationCurrency" align="center" show-overflow-tooltip min-width="100" :formatter="currencyValuationFormat" />
      <el-table-column :label="$t('Lead Deal Team')" align="center">
        <el-table-column :label="$t('投资时团队')" align="center" prop="dashboardVO.leadDealTeam" show-overflow-tooltip min-width="140" />
      </el-table-column>
      <el-table-column :label="$t('Leader Now')" align="center">
        <el-table-column :label="$t('现时项目负责人')" align="center" prop="dashboardVO.leaderNow" show-overflow-tooltip min-width="140" />
      </el-table-column>
      <el-table-column :label="$t('Team Now')" align="center">
        <el-table-column :label="$t('现时团队')" align="center" prop="dashboardVO.teamNow" show-overflow-tooltip min-width="140" />
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getData, listDeal, findFundList } from '@/api/sass/kaihui/dashboard/kaiHuiDashboard'
import { getToken } from '@/utils/auth'
import axios from 'axios'

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 异常经营表格数据
      dashboardList: [],
      // 查询参数
      queryParams: {
        investorId: '',
        dealId: '',
        dealIndustry: '',
        endDate: undefined,
        pageNum: 1,
        pageSize: 10
      },
      arrayParams: {
        investorIds: [],
        dealIds: [],
        dealIndustrys: []
      },
      // 查询项目参数
      dealParams: {
        investorId: '',
        dealIndustry: ''
      },
      // 币种字典
      currencyOptions: [],
      // 上市情况字典
      listedOptions: [],
      // 项目行业options
      dealIndustryOptions: [],
      // 所有基金options
      fundOptions: [],
      // 项目options
      dealOptions: [],
      // 项目投资类型字典
      investmentTypeOptions: []
    }
  },
  created() {
    this.getList()
    this.getDicts('currency').then(response => {
      this.currencyOptions = response.data
    })
    this.getDicts('bf_group_listed_situation').then(response => {
      this.listedOptions = response.data
    })
    this.getDicts('deal_industry').then(response => {
      this.dealIndustryOptions = response.data
    })
    this.getDicts('deal_investment_type_kh').then(response => {
      this.investmentTypeOptions = response.data
    })
    findFundList({}).then(response => {
      this.fundOptions = response.data
    })
  },
  methods: {
    /** 查询异常经营列表 */
    getList() {
      this.loading = true
      this.appendSearch()
      getData(this.queryParams).then(response => {
        this.dashboardList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 格式化项目投资类型字典
    investmentTypeFormat(row) {
      return this.selectDictLabel(this.investmentTypeOptions, row.dashboardVO.typeOfInvestment)
    },
    // 格式化项目行业字典
    dealIndustryFormat(row) {
      return this.selectDictLabel(this.dealIndustryOptions, row.dashboardVO.sector1)
    },
    // 格式化币种字典
    currencyFormat(row) {
      return this.selectDictLabel(this.currencyOptions, row.dashboardVO.currency)
    },
    // 格式化估值币种字典
    currencyValuationFormat(row) {
      return this.selectDictLabel(this.currencyOptions, row.dashboardVO.valuationCurrency)
    },
    // 格式化上市情况字典
    listedFormat(row) {
      return this.selectDictLabel(this.listedOptions, row.dashboardVO.listed)
    },
    // 根据基金投资主体ID和项目行业，获取项目信息
    changeData() {
      this.dealOptions = []
      this.queryParams.dealId = ''
      this.appendSearch()
      if (this.dealParams.investorId || this.dealParams.dealIndustry) {
        this.dealParams.dealStatus = 'NOTQ'
        listDeal(this.dealParams).then(res => {
          this.dealOptions = res.rows
        })
      }
    },
    // 拼接查询条件
    appendSearch() {
      // 基金ID
      if (this.arrayParams.investorIds) {
        this.queryParams.investorId = ''
        this.dealParams.investorId = ''
        this.arrayParams.investorIds.forEach(item => {
          this.queryParams.investorId += '' + item + ','
        })
        if (this.queryParams.investorId) {
          this.queryParams.investorId = this.queryParams.investorId.substring(0, this.queryParams.investorId.length - 1)
          this.dealParams.investorId = this.queryParams.investorId
        }
      } else {
        this.queryParams.investorId = ''
        this.dealParams.investorId = ''
      }
      // 项目ID
      if (this.arrayParams.dealIds) {
        this.queryParams.dealId = ''
        this.arrayParams.dealIds.forEach(item => {
          this.queryParams.dealId += '' + item + ','
        })
        if (this.queryParams.dealId) {
          this.queryParams.dealId = this.queryParams.dealId.substring(0, this.queryParams.dealId.length - 1)
        }
      }
      // 项目行业
      if (this.arrayParams.dealIndustrys) {
        this.queryParams.dealIndustry = ''
        this.dealParams.dealIndustry = ''
        this.arrayParams.dealIndustrys.forEach(item => {
          this.queryParams.dealIndustry += '' + item + ','
        })
        if (this.queryParams.dealIndustry) {
          this.queryParams.dealIndustry = this.queryParams.dealIndustry.substring(0, this.queryParams.dealIndustry.length - 1)
          this.dealParams.dealIndustry = this.queryParams.dealIndustry
        }
      } else {
        this.queryParams.dealIndustry = ''
        this.dealParams.dealIndustry = ''
      }
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.arrayParams.dealIds = []
      this.arrayParams.investorIds = []
      this.arrayParams.dealIndustrys = []
      this.queryParams.endDate = ''
      this.queryParams.dealIndustry = ''
      this.queryParams.investorId = ''
      this.queryParams.dealId = ''
      this.dealOptions = []
      this.queryHandle()
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.appendSearch()
      console.log('------------', this.queryParams)
      this.loading = true
      // 准备下载
      axios({
        method: 'post',
        url: process.env.VUE_APP_BASE_API + '/dashboard/export',
        data: this.queryParams,
        responseType: 'blob',
        headers: { 'Authorization': 'Bearer ' + getToken() }
      }).then(res => {
        const blob = res.data
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          const a = document.createElement('a')
          // 获取选择的基金名称
          const fileName = '【Dashboard报表】'
          a.download = fileName + `.xlsx`
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          this.loading = false
        }
      })
    }
  }
}
</script>
